//引入图表的核心组件  
import * as echarts from 'echarts/core'
//引入折线图所需的组件
// import { GridComponent } from 'echarts/components' 
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
//引入堆叠面积图表组件
import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
} from 'echarts/components'
// import { LineChart } from 'echarts/charts'   //注释的原因是两个不同的图表用到相同的组件
// import { UniversalTransition } from 'echarts/features'
// import { CanvasRenderer } from 'echarts/renderers'

//基础折线图函数封装
var myChart1 //基础折线图图表实例，声明为全局变量【在函数外面】
function initBasicLineChart(chartDom, xAxisData, seriesData) {
    echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
    // var chartDom = document.getElementById('main') //此种是JavaScript中获取html文档中dom元素的方式，但是不适用于vue中
    //判断图表实例是否为空，如果不为空的进行销毁
    if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
        myChart1.dispose();
    }
    myChart1 = echarts.init(chartDom) //vue3中获取dom元素的方式，此为第3步：访问dom
    var option = {
        xAxis: {
            type: 'category',
            data: xAxisData,
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: seriesData,
                type: 'line',
            },
        ],
    }
    option && myChart1.setOption(option)
}

//堆叠面积图表函数封装
var myChart2 //堆叠面积图图表实例，声明为全局变量【在函数外面】
function initStackedAreaChart(chartDom, xAxisData, tempMinSeries, tempMaxSeries) {
    echarts.use([
        TitleComponent,
        ToolboxComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
        LineChart,
        CanvasRenderer,
        UniversalTransition,
    ])
    //   var chartDom = document.getElementById('main')
    //判断图表实例是否为空，如果不为空的进行销毁
    if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
        myChart2.dispose();
    }
    myChart2 = echarts.init(chartDom)
    var option
    option = {
        title: {
            text: 'Stacked Area Chart',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
        },
        legend: {
            data: ['tempMin', 'tempMax'],
        },
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: xAxisData,
            },
        ],
        yAxis: [
            {
                type: 'value',
            },
        ],
        series: [
            {
                name: 'tempMin',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series',
                },
                data: tempMinSeries,
            },
            {
                name: 'tempMax',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series',
                },
                data: tempMaxSeries,
            },
        ],
    }
    option && myChart2.setOption(option)
}
export { initBasicLineChart, initStackedAreaChart } 